<template>
  <el-switch
    v-bind="$attrs"
    v-model="switchValue"
    :disabled="disabled"
    :width="width"
    :inline-prompt="inlinePrompt"
    :active-icon="activeIcon"
    :inactive-icon="inactiveIcon"
    :active-text="activeText"
    :inactive-text="inactiveText"
    :active-value="activeValue"
    :inactive-value="inactiveValue"
    :active-color="activeColor"
    :inactive-color="inactiveColor"
    :border-color="borderColor"
    :name="name"
    :validate-event="validateEvent"
    :before-change="beforeChange"
    @change="handleChange"
  />
</template>

<script>
export default {
  name: 'MyElSwitch',
  inheritAttrs: false,
  props: {
    modelValue: {
      type: [Boolean, String, Number],
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: 40
    },
    inlinePrompt: {
      type: Boolean,
      default: false
    },
    activeIcon: {
      type: [String, Object],
      default: ''
    },
    inactiveIcon: {
      type: [String, Object],
      default: ''
    },
    activeText: {
      type: String,
      default: ''
    },
    inactiveText: {
      type: String,
      default: ''
    },
    activeValue: {
      type: [Boolean, String, Number],
      default: true
    },
    inactiveValue: {
      type: [Boolean, String, Number],
      default: false
    },
    activeColor: {
      type: String,
      default: '#409eff'
    },
    inactiveColor: {
      type: String,
      default: '#c0ccda'
    },
    borderColor: {
      type: String,
      default: '#dcdfe6'
    },
    name: {
      type: String,
      default: ''
    },
    validateEvent: {
      type: Boolean,
      default: true
    },
    beforeChange: {
      type: Function,
      default: undefined
    }
  },
  emits: ['update:modelValue', 'change'],
  computed: {
    switchValue: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script> 